import React from 'react';
import { useNavigate } from 'react-router-dom';
import { Layout, Menu, Button } from 'antd';
import { LogoutOutlined, UserOutlined, ShoppingCartOutlined } from '@ant-design/icons';
import './Dashboard.css';

const { Header, Content, Sider } = Layout;

const Dashboard = ({ user, onLogout }) => {
  const navigate = useNavigate();

  const handleLogout = () => {
    onLogout();
    navigate('/login');
  };

  return (
    <Layout style={{ minHeight: '100vh' }}>
      <Header className="header">
        <div className="logo" />
        <div className="user-info">
          <span>欢迎, {user?.username}</span>
          <Button 
            type="text" 
            icon={<LogoutOutlined />} 
            onClick={handleLogout}
          >
            退出登录
          </Button>
        </div>
      </Header>
      <Layout>
        <Sider width={200} className="site-layout-background">
          <Menu
            mode="inline"
            defaultSelectedKeys={['1']}
            style={{ height: '100%', borderRight: 0 }}
          >
            <Menu.Item key="1" icon={<UserOutlined />}>
              个人信息
            </Menu.Item>
            <Menu.Item key="2" icon={<ShoppingCartOutlined />}>
              我的订单
            </Menu.Item>
          </Menu>
        </Sider>
        <Layout style={{ padding: '0 24px 24px' }}>
          <Content
            className="site-layout-background"
            style={{
              padding: 24,
              margin: 0,
              minHeight: 280,
            }}
          >
            {/* 这里放置主要内容 */}
          </Content>
        </Layout>
      </Layout>
    </Layout>
  );
};

export default Dashboard; 